<template>
  <!--模板-->
  <h1>测试 onWatcherCleanup </h1>
  查询 ： {{ find }}<br>
  翻页 ： {{ pager }}<br>
  数据 ： {{ list }}<br>
  <el-button type="" @click="changFind">模拟查询 </el-button>
  <el-button type="" @click="changePager">模拟翻页 </el-button>

</template>


<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, onWatcherCleanup, watch, shallowRef, getCurrentWatcher } from 'vue'

  // 查询条件
  const find = reactive({
    count: 0,
    name: 'jyk'
  })

  // 翻页的页号
  const pager = reactive({
    pageIndex: 1,
    size: 10
  })

  // 列表数据
  const list = shallowRef([
    {
      name: 'jyk'
    }
  ])
  
  // 计时器，这个要在外面定义
  let timer: any

  const controller = new AbortController()

  const loadData2 = async (flag: number) => {
    onWatcherCleanup(() => {
      // 取消申请
      console.log('onWatcherCleanup 取消申请')
      controller.abort()
    })
    // 加载数据
   

  }

  // 加载数据 的方法
  const loadData = async (flag: number) => {
    // clearTimeout(timer)
    timer = setTimeout(() => {
      // 加载数据
      console.log('加载数据：loadData')
      // 模拟 加载数据 等待 20ms 被调用
      // axios.get('/api/xxx').then(res => {})
      list.value = [{
        name: 'jyk1' + flag,
      },
      {
        name: 'jyk2',
      }]
    }, 20)

    if (getCurrentWatcher()) {
      onWatcherCleanup(() => {
        // 1、先打印
        console.log('onWatcherCleanup 删除 定时器')
        clearTimeout(timer)
      })
    }
   
  }

  // 监听 查询
  watch(find, async () => {
    // 2、然后才会打印
    console.log('watch -- find', find)
    pager.pageIndex = 1
    await loadData(find.count * 10)
  }) 
  
  // 监听页号
  watch(() => pager.pageIndex, async () => {
    console.log('watch -- pager.pageIndex', pager)
    await loadData(pager.pageIndex)
  }) 

  const changePager = () => {
    pager.pageIndex++
  }
  
  const changFind = () => {
    find.count++
  }

</script>